<!dtype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>与客服1聊天中</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<meta name="format-detection" content="telephone=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="css/chat.css">
	</head>
	<body>
		<div class="chat-main">
			<!-- 隐藏回复 -->
			<div class="chat-simulator">
				<p id="chat_hint" class="chat-hint"><span class="chat-hint-icon">!</span><span class="chat-hint-text" style="color:black">发送内容不能为空</span></p>
				<textarea class="simulator-text" autofocus placeholder="请写下你希望我对你说的话,按enter键提交（shift+enter键换行）。"></textarea>
				<div class="simulator-btn">
					<button class="simulator-submmit">提交</button>
					<button class="simulator-close">关闭</button>
				</div> 
			</div>
			<div class="chat-person-list" style="width: 300px ;height: 700px;overflow-y: auto; background-color: #FFFFFF;box-shadow:  0 rgba(0, 0, 0, .4);border-right: 1px solid #ddd;">
				<div style="height: 120px;background-color: #0094f1;padding: 10px;" class="chat-person-list-left-body">
					<div class="chat-person-list-left-body-act" style="display: flex;">
						<div style="width: 70px;height: 70px;">
							<img src="img/me.png" width="70" height="70" alt="" />
						</div>
						<span style="display: inline-block;height: 50px;padding: 10px; font-size: 20px;color: #FFFFFF;">上海吉贝克信息有限公司</span>
					</div>
					<!-- 查询图标 -->
					<div class="chat-person-list-left-body-query" style="line-height: 35px;background-color: #51a0e0;margin: 10px 0;border-radius: 4px;">
						<input type="text" name="title" placeholder="搜索最近联系人" autocomplete="off" class="layui-input" style="padding: 10px;font-size:12px;color: #FFFFFF;">
					</div>
				</div>
				<!-- 列表 -->
				<div class="chat-person-list-item" style="padding: 0 10px;">
					<div class="chat-person-list-item-tab">
						<span style="display: inline-block;width: 45px;height: 45px;margin: 12px 10px 12px 0;"><img width="45" height="45"
							 src="img/act.png" alt="" />
						</span>
						<div class="chat-person-list-item-tab-body">
							<p style="display: flex;justify-content: space-between;"><b>张小小</b><span style="color: #a0a0a0;font-size: 13px;">09:30</span></p>
							<p class="chat-person-list-item-tab-body-del">你好,有什么问题?</p>
						</div>
					</div>
					<div class="chat-person-list-item-tab">
						<span style="display: inline-block;width: 45px;height: 45px;margin: 12px 10px 12px 0;"><img width="45" height="45"
							 src="img/act.png" alt="" />
						</span>
						<div class="chat-person-list-item-tab-body">
							<p style="display: flex;justify-content: space-between;"><b>张小小</b><span style="color: #a0a0a0;font-size: 13px;">09:30</span></p>
							<p class="chat-person-list-item-tab-body-del">你好,有什么问题?</p>
						</div>
					</div>
					<div class="chat-person-list-item-tab">
						<span style="display: inline-block;width: 45px;height: 45px;margin: 12px 10px 12px 0;"><img width="45" height="45"
							 src="img/act.png" alt="" />
						</span>
						<div class="chat-person-list-item-tab-body">
							<p style="display: flex;justify-content: space-between;"><b>张小小</b><span style="color: #a0a0a0;font-size: 13px;">09:30</span></p>
							<p class="chat-person-list-item-tab-body-del">你好,有什么问题?</p>
						</div>
					</div>
					<div class="chat-person-list-item-tab">
						<span style="display: inline-block;width: 45px;height: 45px;margin: 12px 10px 12px 0;"><img width="45" height="45"
							 src="img/act.png" alt="" />
						</span>
						<div class="chat-person-list-item-tab-body">
							<p style="display: flex;justify-content: space-between;"><b>张小小</b><span style="color: #a0a0a0;font-size: 13px;">09:30</span></p>
							<p class="chat-person-list-item-tab-body-del">你好,有什么问题?</p>
						</div>
					</div>
					<div class="chat-person-list-item-tab">
						<span style="display: inline-block;width: 45px;height: 45px;margin: 12px 10px 12px 0;"><img width="45" height="45"
							 src="img/act.png" alt="" />
						</span>
						<div class="chat-person-list-item-tab-body">
							<p style="display: flex;justify-content: space-between;"><b>张小小</b><span style="color: #a0a0a0;font-size: 13px;">09:30</span></p>
							<p class="chat-person-list-item-tab-body-del">你好,有什么问题?</p>
						</div>
					</div>
					<div class="chat-person-list-item-tab">
						<span style="display: inline-block;width: 45px;height: 45px;margin: 12px 10px 12px 0;"><img width="45" height="45"
							 src="img/act.png" alt="" />
						</span>
						<div class="chat-person-list-item-tab-body">
							<p style="display: flex;justify-content: space-between;"><b>张小小</b><span style="color: #a0a0a0;font-size: 13px;">09:30</span></p>
							<p class="chat-person-list-item-tab-body-del">你好,有什么问题?</p>
						</div>
					</div>
				</div>
			</div>
			<div class="chat-main-body">
				<div class="chat-header">
					<div class="chat-service-info">
						<a class="chat-service-img"></a>
						<div class="chat-service-title">
							<p class="chat-service-detail">我是您的专属客服</p>
						</div>
					</div>
				</div>
				<div id="chat_contain" class="chat-contain">
					<p class="chat-service-contain">
						<span class="chat-text chat-service-text">您好</span>
					</p>
				</div>
				<div class="chat-submit">
					<p id="chatHint" class="chat-hint"><span class="chat-hint-icon">!</span><span class="chat-hint-text">发送内容不能为空</span></p>
					<textarea id="chat_input" class="chat-input-text" autofocus placeholder="请输入您想对我说的话，按Enter键发送（shift+Enter换行）。"></textarea>
					<div class="chat-input-tools">
						<button class="chat-input-button">发送</button>
						<button class="chat-service-simulator">模拟</button>
						<button class="chat-close-button">关闭</button>
					</div>
				</div>
			</div>
			
			<div class="chat-main" id="chat-main" style="display: none;">
				<div class="chat-person-list" style="width: 300px ;height: 700px;overflow-y: auto; background-color: #FFFFFF;box-shadow:  0 rgba(0, 0, 0, .4);border-right: 1px solid #ddd;">
					<div style="height: 120px;background-color: #0094f1;padding: 10px;" class="chat-person-list-left-body">
						<div class="chat-person-list-left-body-act" style="display: flex;">
							<div style="width: 70px;height: 70px;">
								<img src="img/me.png" width="70" height="70" alt="" />
							</div>
							<span style="display: inline-block;height: 50px;padding: 10px; font-size: 20px;color: #FFFFFF;">上海吉贝克信息有限公司</span>
						</div>
						<!-- 查询图标 -->
						<div class="chat-person-list-left-body-query" style="line-height: 35px;background-color: #51a0e0;margin: 10px 0;border-radius: 4px;">
							<input type="text" name="title" placeholder="搜索最近联系人" autocomplete="off" class="layui-input" style="padding: 10px;font-size:12px;color: #FFFFFF;">
						</div>
					</div>
					<!-- 列表 -->
					<div class="chat-person-list-item" style="padding: 0 10px;">
						<div class="chat-person-list-item-tab">
							<span style="display: inline-block;width: 45px;height: 45px;margin: 12px 10px 12px 0;"><img width="45" height="45"
								 src="index/img/act.png" alt="" />
							</span>
							<div class="chat-person-list-item-tab-body">
								<p style="display: flex;justify-content: space-between;"><b>张小小</b><span style="color: #a0a0a0;font-size: 13px;">09:30</span></p>
								<p class="chat-person-list-item-tab-body-del">你好,有什么问题?</p>
							</div>
						</div>
					</div> 
				</div>
				<div class="chat-main-body">
					<div class="chat-header">
						<div class="chat-service-info">
							<a class="chat-service-img"></a>
							<div class="chat-service-title">
								<p class="chat-service-detail">我是您的专属客服</p>
							</div>
						</div>
					</div>
					<div id="chat_contain" class="chat-contain">
						<p class="chat-service-contain">
							<span class="chat-text chat-service-text">您好</span>
						</p>
					</div>
					<div class="chat-submit">
						<p id="chatHint" class="chat-hint"><span class="chat-hint-icon">!</span><span class="chat-hint-text">发送内容不能为空</span></p>
						<textarea id="chat_input" class="chat-input-text" autofocus placeholder="请输入您想对我说的话，按Enter键发送（shift+Enter换行）。"></textarea>
						<div class="chat-input-tools">
							<button class="chat-input-button">发送</button>
							<button class="chat-close-button">关闭</button>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
		<script src="index/layui/layui.js"></script>
		<script>
			layui.use(['form', 'carousel', 'element', 'layer'], function() {
				var d = document;
				/*显示对话窗口*/
				function openBody() {
					$('.chat-main').css({
						'height': '0'
					});
					$('.chat-main').animate({
						'height': '700px'
					})
				}
				openBody();
				// 模拟一些后端传输数据
				var serviceData = {
					'robot': {
						'chat': ['Google一下吗？www.google.com', '这个网站您看一下www.baidu.com', '稍等哦~', '嘿嘿', '百度一下？www.baidu.com', '嗯嗯嗯'],
					}
				};

				var chatMain = $('.chat-main'),
					chatHint = $('#chatHint'),
					chat_Hint = $('#chat_hint'),
					chat_main = d.querySelector('.chat-main'),
					chatInput = d.querySelector('#chat_input'),
					chatContain = d.querySelector('#chat_contain');
				/*关闭对话框*/
				function closeChat() {
					$('.chat-main').animate({
						'height': '100'
					});
					$('.chat-main').css({
						'display': 'none'
					});
				}

				/*创建新消息框*/
				function createInfo(name, value) {
					var chatTime = new Date();
					chatTime = chatTime.toLocaleTimeString();
					var nodeP = d.createElement('p'),
						nodeSpan = d.createElement('span'),
						nodeTime = d.createElement('p'),
						imgSpan = d.createElement('span');
					value = value.replace(/(((ht|f)tps?):\/\/)?([A-Za-z0-9]+\.[A-Za-z0-9]+[\/=\?%\-&_~`@[\]\':+!]*([^<>\"\"])*)/g,
						function(content) {
							return "<a href='http://" + content + "' class='chat-address' target='view_window' style='color:#6666cc '>" +
								content + '</a>';;
						});
					nodeP.classList.add('chat-' + name + '-contain');
					nodeSpan.classList.add('chat-' + name + '-text', 'chat-text');
					nodeTime.classList.add('chat-time');
					imgSpan.classList.add('chat-img');
					nodeSpan.innerHTML = value;
					nodeTime.innerHTML = chatTime;
					nodeP.appendChild(nodeTime);
					nodeP.appendChild(nodeSpan);
					nodeSpan.appendChild(imgSpan);
					chatContain.appendChild(nodeP);
					chatContain.scrollTop = chatContain.scrollHeight;
				}
				createInfo('service', '您好'); /*发送第一句话*/
				var timer,
					timerId,
					flagInput = false;
				shiftDown = false; // 判断是否按住shift键

				function chatHintNull(chatHint) { //空输入提示
					setTimeout(function() {
						chatHint.fadeIn();
						clearTimeout(timerId);
						timer = setTimeout(function() {
							chatHint.fadeOut();
						}, 1000);
					}, 10);
					timerId = timer;
				};
				/*监控是否按下enter*/
				function isEnter(Input, Hint, type, e) {
					e = e || window.event;
					if (e.keyCode == 16) { //按住shift键
						shiftDown = true;
					}
					if (e.keyCode == 13) {

						if (shiftDown == true) {
							shiftDown = false;
							return true;
						} else if (shiftDown == false && Input.value == '') {
							Hint();
							return true;
						} else {
							e.preventDefault();
							createInfo(type, Input.value);
							submityouText(Input.value);
							Input.value = null;
							Input.focus();
						}
					}
				}
				chatInput.addEventListener('keydown', function(e) { /*输入框按enter*/
					e = e || window.event;
					isEnter(chatInput, chatHintNull, 'you', e);
				})
				/*为按钮绑定事件*/
				$('.chat-input-button').click(function() { /*消息框发送*/
					if (chatInput.value != '') {
						createInfo('you', chatInput.value);
						submityouText(chatInput.value);
						chatInput.value = null;
						chatInput.focus();
						// $.ajax({
						// 	url:'192.168.1.108:8080/ws/im/talk/1/9',
						// })
					} else {
						chatHintNull(chatHint);
					}
				});
				/*模拟后台消息*/
				var chatSim = $('.chat-simulator'),
					sim_Text = d.querySelector('.simulator-text');
				simText = $('.simulator-text');
				$('.chat-service-simulator').click(
					function() {
						chatSim.fadeIn(500);
						simText.focus();
					}
				);
				$('.simulator-submmit').click(function() {
					if (simText.val() == '') {
						chatHintNull(chat_Hint);
					} else {
						createInfo('service', simText.val());
						simText.val('');
						simText.focus();
					}
				});
				/*模拟的输入框enter键判断*/
				sim_Text.addEventListener('keydown', function(e) {
					e = e || window.event;
					isEnter(sim_Text, chatHintNull, 'service', e);
				})
				$('.simulator-close').click(function() {
					chatSim.fadeOut();
					simText.val('');
					simText.focus();
				});

				/*关闭按钮*/
				$('.chat-close-button').click(
					function() {
						if (confirm("不再聊会儿吗？")) {
							window.close();
						} else {}
					}
				);
				/*按钮特效*/
				var buttons = $('.chat-input-tools button');
				buttons.each(function(i) {
					$(this).mouseenter(function() {
						buttons.eq(i).fadeTo('slow', 0.8);
					});
				})
				buttons.each(function(i) {
					$(this).mouseleave(function() {
						buttons.eq(i).fadeTo('slow', 1);
					});
				})

				function submityouText(text) {
					// 模拟后端回复
					var num = Math.random() * 10;
					if (num <= 7) {
						getServiceText(serviceData);
					}
				}


				submitserveText(chatInput.value);

				function submitserveText(text) {
					// 模拟你发送
					var num = Math.random() * 10;
					if (num <= 7) {
						getYouText(serviceData);
					}
				}

				function getServiceText(data) { /*已定义后台消息框*/
					var serviceText = data.robot.chat,
						i = Math.floor(Math.random() * serviceText.length);
					createInfo('service', serviceText[i]);
				}

				function getYouText(data) { /*已定义你的消息框*/
					var serviceText = data.robot.chat,
						i = Math.floor(Math.random() * serviceText.length);
					createInfo('you', serviceText[i]);
				}
			});
		</script>
	</body>
</html>
